<template>
  <!-- 放置弹层组件 -->
  <el-dialog :title="titleupdate" :visible="showDialog" :close-on-click-modal="false" @close="closefn">
    <!-- 匿名插槽 -->
    <el-form ref="addfrom" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-10个字符" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="form.description" style="width:80%" placeholder="1-100个字符" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <div slot="footer">
      <el-button type="primary" size="small" @click="addfn">确定</el-button>
      <el-button size="small" @click="closefn">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { AddUSerInfoAPI, againListAPI } from '@/api/setting'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: '',
        description: '',
        id: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: ['blur'] },
          { min: 1, max: 10, message: '部门名称内容长度为1~10', trigger: ['blur'] }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: ['blur'] },
          { min: 1, max: 10, message: '部门名称内容长度为1~100', trigger: ['blur'] }
        ]
      }
    }
  },
  computed: {
    titleupdate() {
      return this.form.id ? '编辑角色' : '新增角色'
    }
  },
  methods: {
    closefn() {
      this.$emit('closefn')
      this.$refs.addfrom.resetFields()
      this.form = {
        name: '',
        description: ''
      }
    },
    addfn() {
      this.$refs.addfrom.validate(async(flag) => {
        if (flag) {
          if (this.form.id) {
            // this.form.id = this.
            const res = await againListAPI(this.form.id, this.form)
            console.log(res)
            this.$message.success('修改成功')
          } else {
            const res = await AddUSerInfoAPI(this.form)
            console.log(res)
            this.$message.success('添加成功')
          }
          this.closefn()
          this.$parent.getuserINfo()
        }
      })
    }
  }
}
</script>
